{[{define "admin/index.html"}]}
<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .el-menu-vertical-demo:not(.el-menu--collapse) {
            width: 200px;
            min-height: 400px;
            
        }

        .logo_area {
            display: flex;
            justify-content: center;
        }

        body {
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
        }

        .showCollapse {
            min-width: 260px;
        }

        .tags {
            background-color: white;
            margin: 0 5px;
            cursor: default
        }
        
    </style>

</head>

<body style="margin:0">
    <div id="app">
        <el-container style="padding:20px;height: 100vh;" class="background-color">
            <el-menu :class="isCollapse?'':'showCollapse'" style="border:0;border-radius: 6px;" default-active="1-4-1"
                class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
                <el-menu-item>
                    <img v-show="!isCollapse" style="width:140px;margin-right:40px"
                        src="http://inforelease.wanyii.net/uploads/20220111/d5020df3cdeb3d04e954311ad890a58d.png">
                    <i @click="changeFold()" :class="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'"></i>
                </el-menu-item>
                <el-menu-item @click="changeTabs('/admin/index/dashboard')" style="margin-top:30px" index="3">
                    <div>
                        <i class="el-icon-odometer"></i>
                        <span slot="title">控制台</span>
                    </div>
                </el-menu-item>
                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-setting"></i>
                        <span slot="title">系统设置</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="1-3">基础参数设置</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-user"></i>
                        <span slot="title">用户管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item @click="changeTabs('/admin/user/index')" index="2-1">用户列表</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>

            <el-container>
                <el-header>
                    <el-tag class="tags" style="margin:0">
                        控制台
                    </el-tag>
                    <el-tag class="tags" v-for="tag in tags" :key="tag.name" closable :type="tag.type">
                        {{tag.name}}
                    </el-tag>
                </el-header>
                <el-main style="padding:0 20px">
                    <iframe :src="iframeUrl" style="width: 100%;height:100%;border:0;margin:0">

                    </iframe>
                </el-main>
            </el-container>
        </el-container>
    </div>
</body>
<script type="text/javascript">
    let = new Vue({
        el: '#app',
        data: {
            iframeUrl:'/admin/index/dashboard',
            isCollapse: true,
            tags: [
                { name: '用户管理', type: 'info' },
                { name: '基础配置', type: 'info' },
                { name: '需求列表', type: 'info' },
                { name: '分类管理', type: 'info' },
            ]
        },
        methods: {
            changeTabs(url){
                this.iframeUrl=url
            },
            handleOpen() {

            },
            handleClose() {

            },
            changeFold() {
                this.isCollapse = !this.isCollapse;
            }
        }
    })
</script>

</html>
{[{end}]}